<template>
	<div>
		<HomeHeader></HomeHeader>
		<HomeLeft :cur="1"></HomeLeft>
		<div id="main">
			<div id="web_con" v-if="isedit">
				<div class="web_wp">
					<div class="web_location">
						<div class="here_area">
							<strong>当前位置：</strong>商户管理&nbsp;&nbsp;»&nbsp;&nbsp;编辑
						</div>
						<div class="here_btn">
							<a href="javascript:history.back()" class="web_btn btn_add"><em
									class="iconfont icon-shdcfanhui"></em>返回</a>
						</div>
					</div>

					<div class="tabTitle">
						<ul class="clearfix">
							<li class="cur"><a href="javascript:;">基本信息</a></li>
						</ul>
						<div class="tabCont">
							<div class="cont">
								<table class="dataTable">
									<tr>
										<td class="ltd">商户名称</td>
										<td class="rtd">
											<input type="text" v-model="name" class="input-text">
											<span class="text-red pl10">*必填</span>
										</td>
									</tr>

									<tr>
										<td class="ltd">商户号</td>
										<td class="rtd">
											<input type="text" v-model="merchantno" :disabled="id>0" class="input-text">
											<span class="text-red pl10">*必填，不可修改</span>
										</td>
									</tr>

									<tr>
										<td class="ltd">商户LOGO</td>
										<td class="rtd">
											<PicUp :myIcon="icon" :myText="'600' + '*' +'600'" @handleChange="PicIcon">
											</PicUp>
										</td>
									</tr>
									<tr>
										<td class="ltd">商户简介</td>
										<td class="rtd">
											<textarea class="input_textarea" v-model="intro"></textarea>
										</td>
									</tr>
									<tr>
										<td class="ltd">商户图片</td>
										<td class="rtd">
											<el-upload :action="apiurl+'api/admin/upload'" list-type="picture-card"
												:headers="picheaders" :on-success="UpSuccess" :file-list="piclist"
												:on-remove="handleRemove">
												<i class="el-icon-plus"></i>
											</el-upload>
										</td>
									</tr>

									<tr>
										<td class="ltd">商户地址</td>
										<td class="rtd">
											<input type="text" v-model="address" class="input-text">

										</td>
									</tr>
									<tr>
										<td class="ltd">商户电话</td>
										<td class="rtd">
											<input type="text" v-model="tel" class="input-text">
											<span class="text-red pl10">*必填</span>
										</td>
									</tr>


									<tr>
										<td class="ltd">姓名</td>
										<td class="rtd">
											<input type="text" v-model="nickname" class="input-text">
											<span class="text-red pl10">*必填</span>
										</td>
									</tr>

									<tr>
										<td class="ltd">手机号</td>
										<td class="rtd">
											<input type="text" v-model="phone" :disabled="id>0" class="input-text">
											<span class="text-red pl10">*必填，不可修改</span>
										</td>
									</tr>
									<tr v-if="id==0">
										<td class="ltd">身份证号</td>
										<td class="rtd">
											<input type="text" v-model="idcard" class="input-text">
											<span class="text-red pl10">*必填</span>
										</td>
									</tr>


									<tr>
										<td class="ltd">开户行</td>
										<td class="rtd">
											<input type="text" v-model="bankname" class="input-text">
										</td>
									</tr>
									<tr>
										<td class="ltd">银行卡账号</td>
										<td class="rtd">
											<input type="text" v-model="cardno" class="input-text">
										</td>
									</tr>
									<tr>
										<td class="ltd">持卡人</td>
										<td class="rtd">
											<input type="text" v-model="owner" class="input-text">
										</td>
									</tr>
									<tr>
										<td class="ltd">账号</td>
										<td class="rtd">
											<input type="text" :value="phone" disabled class="input-text">
											<span class="text-red pl10">*必填</span>
										</td>
									</tr>

									<tr>
										<td class="ltd">密码</td>
										<td class="rtd">
											<input type="text" v-model="password" class="input-text">
											<span class="text-red pl10">*必填，输入密码进行保存即可修改密码</span>
										</td>
									</tr>
								</table>
							</div>
						</div>
						<div>
							<div class="contBtn">
								<table class="dataTable">
									<tfoot>
										<tr>
											<td class="ltd"></td>
											<td class="rtd">
												<a href="javascript:;" class="web_btn btn_add" @click="SubMit()">
													<em class="iconfont icon-shdcbaocun"></em>保存
												</a>
											</td>
										</tr>
									</tfoot>
								</table>
							</div>
						</div>
					</div>
				</div>

			</div>
		</div>

		<canvas style="top: 150%;position: fixed;width: 200px;height: 200px;" canvas-id="qrcode"
			:style="{width: `${qrcodeSize}px`, height: `${qrcodeSize}px`}" />
	</div>
</template>

<script>
	import HomeHeader from '../components/Header.vue';
	import HomeLeft from '../components/Left.vue';
	import PicUp from '../components/PicUp.vue'
	import uQRCode from '../../static/js/uqrcode.js'
	export default {
		components: {
			HomeHeader,
			HomeLeft,
			PicUp
		},
		data() {
			return {
				name: '', // 名称
				icon: '', //logo
				intro: '',
				phone: '', //手机号				
				address: '', //商户地址
				tel: '', //电话
				business_hours: '', //营业时间
				nickname: '',
				gender: '',
				idcard: '',
				bankname: '',
				cardno: '',
				password: '', //密码
				piclist: [], //图片
				owner: '', //持卡人
				merchantno: '',
				info: [],
				isedit: false,
				id: 0,
				apiurl: '',
				qrcodeSrc: '', //二维码
				qrcodeSize: 200,
			}
		},
		onLoad(e) {
			let that = this;
			var token = that.common.GetStorage('bytoken')
			that.picheaders = {
				'X-Requested-With': 'XMLHttpRequest',
				'Authorization': 'Bearer ' + token,
			}
			that.apiurl = that.common.CommLink();

			if (e.id) {
				that.id = e.id;
				that.GetDeta(e.id);
			} else {
				that.isedit = true;
			}
		},
		methods: {
			PicIcon: function(str) {
				this.icon = str;
			},
			UpSuccess: function(e, file, fileList) {
				var that = this;
				console.log(file.response.data.path);
				var _arr = {
					name: file.name,
					url: file.response.data.path,
				}
				that.piclist = that.piclist.concat(_arr);
				console.log(that.piclist);
			},
			handleRemove(file, fileList) {
				var that = this;
				that.piclist = fileList;
				console.log(that.piclist);
			},
			// 详情
			GetDeta: function(id) {
				let that = this;
				uni.showLoading({
					title: '加载中...',
					mask: true
				});
				that.common.http('GET', 'merchant/' + id, '', function(res) {
					uni.hideLoading();
					console.log(res.data);
					that.name = res.data.name;
					that.address = res.data.address;
					that.intro = res.data.intro;
					that.icon = res.data.logo;
					that.tel = res.data.tel;
					that.business_hours = '24小时营业';
					that.nickname = res.data.user.nickname;
					that.phone = res.data.user.phone;
					that.gender = '男';
					that.info = res.data;
					if (res.data.user.bank) {
						that.bankname = res.data.user.bank.bankname;
						that.cardno = res.data.user.bank.cardno;
						that.owner = res.data.user.bank.owner;
					}
					that.idcard = res.data.user.idcard;
					that.merchantno = res.data.merchantno;
					try {
						JSON.parse(res.data.image);
						that.piclist = JSON.parse(res.data.image);
					} catch (e) {}

					that.isedit = true;
				});
			},


			make() {
				let that = this;
				if (that.id > 0 && that.info.qrcode) {
					that.qrcodeSrc = that.info.qrcode;
					that.Save();
				} else {
					uQRCode.make({
						canvasId: 'qrcode',
						text: that.common.CommLink() + 'h5/#/pages/login/one?shopno=' + that.merchantno,
						size: that.qrcodeSize,
						margin: 10,
						success: res => {
							that.qrcodeSrc = res
							console.log(res);
							that.Save();
						},
						complete: (res) => {
							uni.hideLoading()
						}
					})
				}


			},


			// 保存数据
			Save: function() {
				let that = this;
				if (that.id > 0) {					
					if(that.info.user.bank&&that.bankname==''){
						uni.showToast({
							icon: 'none',
							title: '请完善银行卡信息',
							duration: 2000
						});
						return false;
					}					
					var _data = {
						id:that.id,
						user_id:that.info.user_id,
						name: that.name,
						merchantno: that.merchantno,
						intro: that.intro,
						image: JSON.stringify(that.piclist),
						tel: that.tel,
						business_hours: '24小时营业',
						qrcode: that.qrcodeSrc,
						user: {
							nickname: that.nickname,
							phone: that.phone,
							gender: '男',
							guard: 'merchant',
							id:that.info.user_id
						}
					}

					if (that.address) {
						_data.address = that.address;
					}
					if (that.icon) {
						_data.logo = that.icon;
					}
					if(that.info.user.bank){
						_data.user.bank = {
							id:that.info.user.bank.id,
							user_id:that.info.user_id,
							cardno: that.cardno || '',
							owner: that.owner || '',
							bankname: that.bankname || ''
						};						
					}
					else if (that.cardno || that.owner || that.bankname) {
						_data.user.bank = {
							cardno: that.cardno || null,
							owner: that.owner || null,
							bankname: that.bankname || null
						};
					}
					if (that.password != '') {
						_data.user.password = that.password;
						_data.user.password_confirmation = that.password;
					};
					that.common.http('PUT', 'merchant/' + that.id, _data, function(res) {
						uni.hideLoading();
						uni.showToast({
							icon: 'none',
							title: '修改成功！',
							duration: 2000
						});
						setTimeout(function() {
							that.navigateBack();
						}, 1500);
					});
				} else {
					var _data = {
						name: that.name,
						merchantno: that.merchantno,
						intro: that.intro,
						image: JSON.stringify(that.piclist),
						tel: that.tel,
						business_hours: '24小时营业',
						nickname: that.nickname,
						phone: that.phone,
						gender: '男',
						qrcode: that.qrcodeSrc,
					}
					if (that.address) {
						_data.address = that.address;
					}
					if (that.icon) {
						_data.logo = that.icon;
					}

					if (that.cardno) {
						that.cardno = that.cardno
					}
					if (that.owner) {
						that.owner = that.owner
					}
					if (that.bankname) {
						that.bankname = that.bankname
					}


					if (that.password == '') {
						uni.showToast({
							icon: 'none',
							title: '请输入密码',
							duration: 2000
						});
					} else {
						_data.password = that.password;
						_data.password_confirmation = that.password;
						_data.qrcode = that.qrcodeSrc;
						_data.idcard = that.idcard;
						console.log(_data)
						// return false;
						that.common.http('POST', 'merchant', _data, function(res) {
							uni.hideLoading();
							uni.showToast({
								icon: 'none',
								title: '添加成功',
								duration: 2000
							});
							setTimeout(function() {
								that.navigateBack();
							}, 1500);
						});
					}
				}
			},


			//保存
			SubMit: function() {
				let that = this;
				if (that.name == '') {
					uni.showToast({
						icon: 'none',
						title: '请输入商户名称',
						duration: 2000
					});
				} else if (that.merchantno == '') {
					uni.showToast({
						icon: 'none',
						title: '请输入商户号',
						duration: 2000
					});
				} else if (that.tel == '') {
					uni.showToast({
						icon: 'none',
						title: '请输入商户电话',
						duration: 2000
					});
				} else if (that.nickname == '') {
					uni.showToast({
						icon: 'none',
						title: '请输入姓名',
						duration: 2000
					});
				} else if (that.phone == '') {
					uni.showToast({
						icon: 'none',
						title: '请输入手机号',
						duration: 2000
					});
				} else if ((that.bankname != '' && (that.cardno == '' || that.owner == '')) ||
					(that.cardno != '' && (that.bankname == '' || that.owner == '')) ||
					(that.owner != '' && (that.bankname == '' || that.cardno == ''))) {
					uni.showToast({
						icon: 'none',
						title: '银行卡信息不能只填一个',
						duration: 2000
					});
				} else if (that.idcard == '') {
					uni.showToast({
						icon: 'none',
						title: '请输入身份证号',
						duration: 2000
					});
				} else {
					that.make();
				}
			},

			navigateBack() {
				// #ifdef H5
				const pages = getCurrentPages()
				if (pages.length > 1) {
					uni.navigateBack(1)
					return;
				}
				//使用vue-router返回上一级
				let a = this.$router.go(-1)
				if (a == undefined) {}
				return;
				// #endif
				uni.navigateBack();
			},

		}
	}
</script>

<style>


</style>